<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="咨询建议"
      title-color="#000"
    >
    </u-navbar>
    <u-subsection :list="list" :current="index" @change="change($event)"></u-subsection>
    <view class="content">
      <view v-for="ad in dataShow" class="advice">
        <view class="between-row">
          <view>咨询建议类型</view>
          <view>{{ad.type}}</view>
        </view>
        <view class="between-row">
          <view>联系人</view>
          <view>{{ad.username}}</view>
        </view>
        <view class="between-row">
          <view>联系方式</view>
          <view>{{ad.phone}}</view>
        </view>
        <view class="double-row">
          <view>咨询建议详情</view>
          <view>{{ad.content}}</view>
        </view>
      </view>
    </view>
    <view class="btn" @click="toAdvice">我要咨询建议</view>
  </view>
</template>

<script>
import { getAdvice } from '../../api/system/api'
export default {
  data() {
    return {
      userInfo: {},
      list: [
        {
          name: '待处理'
        },
        {
          name: '已处理'
        },
      ],
      index: '',
      dataShow: []
    };
  },
  onLoad(option) {
    this.userInfo = JSON.parse(option.userInfo)
    this.getData()
  },
  methods: {
    change(index) {
      this.dataShow = this.totalData.filter(v => v.state == (index ? '已处理' : '待处理'))
    },
    getData() {
      getAdvice({
        page: 1,
        pageSize: 1000,
        userId: this.userInfo.id
      }).then(res => {
        this.totalData = res.data.data;
        this.dataShow = this.totalData.filter(v => v.state == '待处理')
      })
    },
    toAdvice() {
      this.$u.route('/pages/user/addAdvice', {
        userInfo: JSON.stringify(this.userInfo)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;

  .img {
    width: 40rpx;
    height: 40rpx;
  }
}



.top {
  width: 100%;
  padding-top: 2vh;

  .header {
    display: flex;
    align-items: center;
    padding: 30rpx;

    .avatar {
      width: 140rpx;
      height: 140rpx;
      line-height: 140rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      margin-right: 30rpx;
    }

    .unlogin .avatar {
      background: #7d8e8e;
    }
  }
}
.btn {
  position: fixed;
  bottom: 30rpx;
  width: 96%;
  left: 2%;
  height: 80rpx;
  text-align: center;
  background: red;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 80rpx;
  border-radius: 80rpx;
}
.content {
  height: 90vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 30rpx;
}
.between-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  color: #666;
  &>view:first-child {
    font-weight: 500;
    color: #000;
  }
}
.double-row>view:first-child {
  font-weight: 500;
  color: #000;
  margin-bottom: 10rpx;
}
.advice {
  width: 100%;
  background: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}
</style>
